<template>
	<div class="barber">
		<ul class="c-container">
			<el-col :span="10" class="searchButton">
				<el-button type="primary" icon="el-icon-search" @click="showDialogVisible" plain>匹配发型师</el-button>
				<el-button type="success" icon="el-icon-refresh" @click="func_getBundData" plain>刷新</el-button>
			</el-col>
		</ul>
		<el-table :data="workRoomBarberList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
			<el-table-column label="序号" width="80" align="center"><template #default="scope">
					{{scope.$index+1}}
			</template></el-table-column>
			<el-table-column label="头像" >
				<template #default="scope">
					<el-image :src="scope.row.headPortrait" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="名称" align="center"></el-table-column>
			<el-table-column prop="spellName" label="拼音" align="center"></el-table-column>
			<el-table-column prop="grade" label="等级" align="center"></el-table-column>
			<el-table-column prop="phone" label="手机号码" align="center"></el-table-column>
			<el-table-column prop="craftValue" label="手艺值" align="center"></el-table-column>
			<el-table-column prop="workYear" label="工作年限" align="center"></el-table-column>
			<el-table-column prop="projectDecs" label="操作" width="250" >
				<template #default="scope">
					<el-button type="danger" size="small" icon="el-icon-delete" @click="func_handleDel(scope.$index, scope.row)" plain>删 除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
				:page-size="query.pageSize" :total="pageTotal" @current-change="func_handlePageChange"></el-pagination>
		</div>
	</div>
	<!-- ---------------------------------------------------------------------------------------------------------------------- -->
	<!-- 发型师弹出框 -->
	<el-dialog title="发型师弹出框" v-model="dialogVisible" width="55%" :close-on-click-modal="false">
		<el-container>
			<el-header>
				<el-col :span="10" class="searchInput">
					<el-input v-model="query.keyword" placeholder="发型师名称 / 拼音 查询" class="handle-input mr10"></el-input>
				</el-col>
				<el-col :span="5" class="searchButton">
					<el-button type="primary" icon="el-icon-search" @click="func_dialogSearch">搜索</el-button>
				</el-col>
			</el-header>
			<el-main>
				<el-table :data="barberList" border class="table" ref="multipleTable" 
					element-loading-background = "rgba(255, 255, 255, .5)" 
					element-loading-text = "加载中，请稍后..."
					element-loading-spinner = "el-icon-loading"
					@selection-change="(selections)=>{func_handleSelectionChange(selections,'true')}"
					@select-all="(selections)=>{func_handleSelectionAll(selections,'true')}"
					header-cell-class-name="table-header" default-expand-all >
				<el-table-column type="selection" width="50" align="center"/>
					<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
					<el-table-column label="头像" >
						<template #default="scope">
							<el-image :src="scope.row.headPortrait" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" ></el-table-column>
					<el-table-column prop="spellName" label="拼音" ></el-table-column>
					<el-table-column prop="grade" label="等级" ></el-table-column>
					<el-table-column prop="phone" label="手机号码" ></el-table-column>
					<el-table-column prop="craftValue" label="手艺值" ></el-table-column>
					<el-table-column prop="workYear" label="工作年限" ></el-table-column>
				</el-table>
			</el-main>
			<el-footer>
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="success" @click="func_chooseData">确 定</el-button>
			</el-footer>
		</el-container>
	</el-dialog>
</template>

<script>
import { onMounted, ref, reactive, toRefs } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter,useRoute } from 'vue-router';
import { findBarberListPage } from "../../../api/hairmanager/barber";
import { findWorkRoomBarberListPage, configWorkRoomBarber, cleanWorkRoomBarber } from "../../../api/hairmanager/workroom";
export default {
	name: "vBarber",
  	props:{
		selectValue: Number
	},
	emits: ["barberData"],
    setup(props, cex){
		onMounted(() => {
		});
		const router = useRouter();
		const route = useRoute();
        // 公共 数据表多选临时存储
        let multipleTable = ref([]);
        let multipleSelectData =reactive([]);
		// 工作室绑定的发型师列表
		let workRoomBarberList = ref([]);
		// 全部发型师数据列表
		let barberList = ref([]);
		// 工作室ID
		let workRoomId = route.query.id;
		let pageTotal = ref(0);
		let dialogVisible = ref(false);
		const query = reactive({
			keyword: "",
			pageIndex: 1,
			pageSize: 10,
		});
// =========================================================================================
		const showDialogVisible = () => {
			initParams();
			dialogVisible.value = true;
		};
        /**
         * @name 工作室发型师列表查询
         * @description 读取工作室发型师数据
         */
        const func_getBundData = () => {
            findWorkRoomBarberListPage(workRoomId).then((res) => {
				workRoomBarberList.value = res.data;
				if(res.data != null){
					pageTotal.value = res.data.length;
				} else {
					pageTotal.value = 0;
				}
			});
        };
        /**
         * @name 发型师列表查询
         * @description 读取发型师数据
         */
		const func_getAllSelectionData =() => {
            findBarberListPage(query).then((res) => {
                barberList.value = res.data.list;
            });
		}
        /**
         * @name 公共 数据查询操作
         * @description 关键词数据查询操作
         */
		const func_dialogSearch = () => {
			func_getAllSelectionData();
		};
        /**
         * @name 公共 分页导航
         * @description 关键词分页查询
         */
		const func_handlePageChange = (val) => {
			query.pageIndex = val;
			func_getBundData();
		};
        /**
         * @name 公共 列表内选择数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionChange = (selections,param) => {
            multipleSelectData = selections;
        };
        /**
         * @name 公共 列表内全选数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionAll = (selections,param) => {
            multipleSelectData = selections;
        };
		/**
		 * @name 工作室发型师配置
		 */
        const func_saveWorkRoomBarberRel = (editParam) => {
            configWorkRoomBarber(editParam).then((res) => {
				if(res.code != 200) {
					if(res.type == 0) {
						ElMessage.warning(res.data.msg);
					} else {
						ElMessage.error(res.data.msg);
					}
				} else {
					func_getBundData();
					dialogVisible.value = false;
					cex.emit('barberData', multipleSelectData);
				}
            });
        };
		const func_chooseData =() =>{
			let sPids = [];
            multipleSelectData.forEach((item) => {
                sPids.push(item['id']);				
            });
			let editParam = {
                "workroomId":route.query.id,
                "barberIds":sPids,
            }
			// 保存组件数据。
			func_saveWorkRoomBarberRel(editParam);
		};
		/**
		 * @name 工作室取消发型师
		 */
		const func_handleDel = (index, row) => {
			let roomBarberParam = {workroomId: workRoomId, barberId: row['id']};
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
            type: "warning",
            }).then(() => {
				// 调用删除数据
				cleanWorkRoomBarber(roomBarberParam).then((res) => {
					if(res.code != 200) {
						if(res.type == 0) {
							ElMessage.warning(res.data.msg);
						} else {
							ElMessage.error(res.data.msg);
						}
					} else {
						workRoomBarberList.value.splice(index, 1);
						func_getBundData();
						ElMessage.success("删除成功");
					}
				});
            }).catch(() => {});
		};
		const func_trClick = (row,event,column) =>{
			console.log(row.id);
		};
		const initParams = () => {
			pageTotal.value = 0;
			multipleTable = ([]);
			multipleSelectData = ([]);
			func_getBundData();
			func_getAllSelectionData();
		};
		initParams();
        return {
			dialogVisible, showDialogVisible,
			query, multipleTable, multipleSelectData, func_handleSelectionAll, func_handleSelectionChange,
			workRoomBarberList, barberList, pageTotal,
			func_getBundData, func_getAllSelectionData, func_handlePageChange, func_dialogSearch, func_handleDel,
			func_chooseData, func_saveWorkRoomBarberRel, func_trClick,
        };
    },
};
</script>
<style scoped>
.barber {
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.barber::-webkit-scrollbar {
    width: 0;
}
.barber-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.searchInput{
	margin-left: 10px;
}
.searchButton{
	margin-left: 10px;
}
.table{
	margin-top: 10px;
}
.footer {
	float:right
}
</style>